<!-- 活跃度排名 -->
<template>
    <div class="EvaluationType">
        <!--<div class="EvaluationType-item" v-for="(item,index) in data" :key="index">
            <span class="EvaluationType-index">{{ index+1 }}</span>
            <span class="EvaluationType-name">{{ item.province }}</span>
            <span class="EvaluationType-num">{{ item.accumulateAccessNum }}</span>
        </div>-->
        <el-radio-group class="EvaluationType-item" @change="changeType" v-model="radio">
			    <el-radio class="EvaluationType-item-radio" :label="1" @click="clickDzhp">地震滑坡评估</el-radio>
			    <el-radio class="EvaluationType-item-radio" :label="2" @click="clickStyh">砂土液化评估</el-radio>
			    <el-radio class="EvaluationType-item-radio" :label="3" @click="clickRtzx">软土震陷评估</el-radio>
			    <el-radio class="EvaluationType-item-radio" :label="4" @click="clickDbpld">地表破裂带评估</el-radio>
			  </el-radio-group>
			  <div class="EvaluationType-subTitle" v-if="isShow">
			  	<div class="sign"></div>
			  	<div class="title" v-show="isShowDzhp">设定地震</div>
			  	<div class="title" v-show="isShowStyh">场地类别</div>
			  	<div class="title" v-show="isShowRtzx">抗震设防烈度</div>
			  	<div class="title" v-show="isShowDbpld">地震要素</div>
			  	<el-button type="primary" link @click="isShow = !isShow">
	           		 收起 
	            <el-icon><ArrowUp /></el-icon>
	        </el-button>
	        <div v-if="isShowDzhp">
				  	<el-radio-group class="EvaluationType-item" @change="changeSubType1" v-model="radioDzhp">
					    <el-radio class="EvaluationType-item-radio dzhp" :label="1">VI度</el-radio>
					    <el-radio class="EvaluationType-item-radio dzhp" :label="2">VII度</el-radio>
					    <el-radio class="EvaluationType-item-radio dzhp" :label="3">VIII度</el-radio>
					    <el-radio class="EvaluationType-item-radio dzhp" :label="4">IX度</el-radio>
					    <el-radio class="EvaluationType-item-radio dzhp" :label="5">X度</el-radio>
					    <el-radio class="EvaluationType-item-radio dzhp" :label="6">XI度</el-radio>
					  </el-radio-group>
				  </div>
				  <div v-if="isShowStyh">
					  <el-radio-group class="EvaluationType-item" @change="changeSubType2" v-model="radioStyh">
					    <el-radio class="EvaluationType-item-radio styh" :label="1">活动构造区</el-radio>
					    <el-radio class="EvaluationType-item-radio styh" :label="2">稳定大陆区</el-radio>					    
					  </el-radio-group>	
				  </div>
				  <div v-if="isShowRtzx">
					  <el-radio-group class="EvaluationType-item" @change="changeSubType3" v-model="radioRtzx">
					    <el-radio class="EvaluationType-item-radio rtzx" :label="1">7度</el-radio>
					    <el-radio class="EvaluationType-item-radio rtzx" :label="2">8度</el-radio>	
					    <el-radio class="EvaluationType-item-radio rtzx" :label="3">9度</el-radio>	
					  </el-radio-group>	
				  </div>
				  <div v-if="isShowDbpld">
				  	<span class="fontClass">震级范围</span>
				  	<el-input v-model="magnitudeRange1" class="inputClass" /> — <el-input v-model="magnitudeRange2" class="inputClass" />
				  	<span class="fontClass">时间范围</span>
				  	<el-input v-model="dateRange1"  class="inputClass" /> — <el-input v-model="dateRange2" class="inputClass" />
				  	<el-button type="primary" link @click="handleQuery">查询 </el-button>
				  </div>	
			  </div>		  
    </div>
</template>
<script setup>
const emit = defineEmits(['getTypeValue']);

const radio = ref(1);
const radioDzhp = ref(3);
const radioStyh = ref(2);
const radioRtzx = ref(2);
const showMore = ref(true);
const isShow = ref(false);
const isShowDzhp = ref(false);
const isShowStyh = ref(false);
const isShowRtzx = ref(false);
const isShowDbpld = ref(false);
const magnitudeRange1 = ref('');
const magnitudeRange2 = ref('');
const dateRange1 = ref('');
const dateRange2 = ref('');
const list = [];
for (let i = 0; i < 5; i++) {
    list.push({
        name: '北京',
        num: Number(i) + 1,
    });
}
function changeType(val){
	if(val == "1"){
		isShow.value = true;
		isShowDzhp.value = true;
		isShowStyh.value = false;
		isShowRtzx.value = false;
		isShowDbpld.value = false;
		let params = {
			parentType: radio.value,
			childType: radioDzhp.value
		}
		emit("getTypeValue", params);
	}else if(val == "2"){
		isShow.value = true;
		isShowStyh.value = true;
		isShowDzhp.value = false;
		isShowRtzx.value = false;
		isShowDbpld.value = false;
		let params = {
			parentType: radio.value,
			childType: radioStyh.value
		}
		emit("getTypeValue", params);
	}else if(val == "3"){
		isShow.value = true;
		isShowRtzx.value = true;
		isShowStyh.value = false;
		isShowDzhp.value = false;
		isShowDbpld.value = false;
		let params = {
			parentType: radio.value,
			childType: radioRtzx.value
		}
		emit("getTypeValue", params);
	}else{
		isShow.value = true;
		isShowDbpld.value = true;
		isShowRtzx.value = false;
		isShowStyh.value = false;
		isShowDzhp.value = false;
		handleQuery();
	}
	
	
}
function changeSubType1(val){
	let params = {
		parentType: radio.value,
		childType: radioDzhp.value
	}
	emit("getTypeValue", params);
}
function changeSubType2(val){
	let params = {
		parentType: radio.value,
		childType: radioStyh.value
	}
	emit("getTypeValue", params);
}
function changeSubType3(val){
	let params = {
		parentType: radio.value,
		childType: radioRtzx.value
	}
	emit("getTypeValue", params);
}
function handleQuery(){
	let params = {
		parentType: radio.value,
		magnitudeRange1: magnitudeRange1.value,
		magnitudeRange2: magnitudeRange2.value,
		dateRange1: dateRange1.value,
		dateRange2: dateRange2.value
	}
	emit("getTypeValue", params);
}
function clickDzhp(){
	isShow.value = true;
	isShowDzhp.value = true;
}
function clickStyh(){
	isShow.value = true;
	isShowStyh.value = true;
}
function clickRtzx(){
	isShow.value = true;
	isShowRtzx.value = true;
}
function clickDbpld(){
	isShow.value = true;
	isShowDbpld.value = true;
}
onMounted(() => {
	let params = {
		parentType: radio.value,
		childType: radioDzhp.value
	}
	emit("getTypeValue", params);
})
</script>
<style scoped lang="scss">
    .EvaluationType{
        color: #fff;
        display: flex;
        width: 400px;
        margin: 10px auto 0;
        position: relative;
        &-item{
           margin-left: 10px;
         	&-radio{
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						margin-bottom: 10px;
						color: #FFFFFF;
						:deep(.el-radio__label) {
					    font-size: 18px;					 
						}
						&:nth-child(2n){
              margin-left: 25px;
                
            }
         	}
         	.dzhp{
         		&:nth-child(n){
         			width: 70px;
             	margin-left: 25px;               
            }
         	}
         	.styh{
         		&:nth-child(n){
         			width: 120px;
         			margin-top: 8px;
             	margin-left: 25px;               
            }
         	}
         	.rtzx{
         		&:nth-child(n){
         			width: 50px;
         			margin-top: 8px;
             	margin-left: 25px;               
            }
         	}
           
        }
        &-subTitle{
            position: absolute;
            top: 90px;
            z-index: 9999;
            background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
						opacity: 0.85;
						box-sizing: border-box;
						width: 450px;
				    left: -25px;
				    padding: 10px 18px;
            .sign{
            	display: inline-block;
            	width:3px;
            	height: 15px;
							background: #FFFFFF;
            }
            .title{
            	display: inline-block;
            	font-size: 18px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 10px;
            }
            .el-button--primary{
			        background: transparent !important;
			        border: none !important;
			        float: right;
			        color: #46FFFF !important;
			        font-size: 14px;
			        cursor: pointer;
			        svg{
			            width: 14px;
			        }
  					}
  					.fontClass{
  						display: inline-block;
  						font-size: 18px;
  						color: #FFFFFF;
  						margin: 10px;
  					}
  					.inputClass{
  						width: 100px;
  						/*margin-right: 20px;*/
  					}
  					:deep(.el-input__inner){
  						background-color: #26306D;
  						color:#FFFFFF;
  						border: 1px solid #3D457B;
  						border-radius: 0 0 0 0;
  					}
        }
       
    }
</style>